<template>
          <van-nav-bar
            title="充值"
            left-text="返回"
            left-arrow
            placeholder
            @click-left="onBack"
            
          />
    <div class="deposit_bar">
      <img src="/assets/images/deposit1.png" alt="">
      <div class="deposit_bar__content">公告：未满18岁的未成年人请勿消费</div>
    </div>
    <div class="deposit_bar_large">
      <img src="/assets/images/deposit2.png" alt="">
      <div class="deposit_bar_large__title">
        <span>账户余额：￥ {{ business.money }}</span>
      </div>
    </div>
    <div class="deposit_bar_large">
      <img src="/assets/images/deposit2.png" alt="">
      <div class="deposit_bar_large__title">
        <span>用户：{{ business.nickname }}</span>
      </div>
    </div>
  
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">分割线</van-divider>
  
    <van-form class="form"
      @submit="onPay"
    >
      <van-field 
        v-model="value"
          label="充值金额"
          name="money"
          placeholder="请填写充值金额"
          left-icon="gold-coin-o"
          required
          @touchstart.stop="show = true"
          :rules="[{ required: true, message: '请填写充值金额' }]"
          readonly 
          clickable
      />

      <van-field
        v-model="fieldValue"
        is-link
        readonly
       
        required
        left-icon="balance-o"
        label="支付方式"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
        <van-picker
          :model-value="pickerValue"
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>

  
      <div class="button">
        <van-button round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">立即充值</van-button>
      </div>
    </van-form>
  
   
    <van-number-keyboard
      v-model="value"
      :show="show"
      @blur="show = false"
    />

    
   
  </template>
  
  <script setup>

const { proxy } = getCurrentInstance()
const business = proxy.$business;


      const way = ref('wx')
      const show = ref(true);
      const value = ref('');
      const columns = [
      { text: '微信', value: 'wx' },
      { text: '支付宝', value: 'zfb' },
    ];
    const fieldValue = ref('微信');
    const showPicker = ref(false);
    const pickerValue = ref([]);
    const onConfirm = ({ selectedValues, selectedOptions }) => {
      showPicker.value = false;
      pickerValue.value = selectedValues;
      fieldValue.value = selectedOptions[0].text;
      way.value = selectedOptions[0].value;
    };
   const onPay = async (value) =>
   {
      let params = {
        money:value.money,
        type:way.value,
        busid:business.value.id
      }
      
      let result = await proxy.$http.post({
        url:'business/recharge',
        params
      })

      if(result.code === 1){
        
       proxy.$router.replace({
        path:'/pay/pay',
        query:{id:result.data.data.id}
       })
        
      }else{
        proxy.$fail(result.msg)
      }
      
   }
    
    const onBack = () => proxy.$router.back();
  </script>
  
  <style scoped>
    @import url('/assets/css/BusinessPay.css');
  </style>